<template>
	<view>
		<view class="fixedbox">
			<image class="bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.NaZldZKolELq6a4af710d498911ed2c7857dc55048d1.png"
			 mode=""></image>
			<view class="head">
				<view class="head_left1" @tap="back()">
					<image src="../../../static/wode/return1.png" mode=""></image>
					<text>返回</text>
				</view>
				<text>VIP会员</text>
				<!-- <text class="head_right1" @tap="toMingxi">交易记录</text> -->
				<view class="head_right1">

				</view>
			</view>
			<view class="card">
				<image class="card_bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.b7UpwMPfWtRTff7cd81000d3ba04122df30bbcd86735.png" mode=""></image>
				<view class="">
					<view class="card-title">
						<text>尊享八大专属权益</text>
					</view>
					<view class="cardList">
						<view class="cardList-item" v-for="(item,index) in vipList1" :key="index">
							<image :src="item.icon" mode=""></image>
							<text class="item-title">{{item.title}}</text>
							<text>{{item.text}}</text>
						</view>
					</view>
					<view class="cardList">
						<view class="cardList-item" v-for="(item,index) in vipList2" :key="index">
							<image :src="item.icon" mode=""></image>
							<text class="item-title">{{item.title}}</text>
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="scroll-box" scroll-x>
				<view class="padding-scroll-box">
					<view class="vip-item" v-for="(item,index) in taocanList1" :key="index">
						<view class="vip-item-title">
							<text>{{item.member_name}}</text>
							<view class="vip-item-title2">
								会员测试期，购买<text>{{item.discount}}折起</text>
							</view>
						</view>
						<view class="priceList" v-for="(item1,index1) in item.cardEntityList" :key="index1">
							<view class="priceList-left">
								<text class="priceList-left-text1">{{item1.member_name}}</text>
								<text class="priceList-left-text2">¥{{item1.discount_amout}}</text>
								<text class="priceList-left-text3">¥{{item1.amount}}</text>
								<view class="zhekouBox">
									{{item1.discount}}折
								</view>
							</view>
							<image class="selectone" v-if="item1.select==true" src="/static/index/theselected.png" mode="" @tap="selectVip(index,index1)"></image>
							<image class="selectone" v-else src="/static/index/uncheck.png" mode="" @tap="selectVip(index,index1)"></image>
						</view>

						<view class="vip-item-bottom">
							<text>权益说明</text>
							<text class="bottom-text" v-for="(item2,index2) in item.member_equity" :key="index2">・{{item2}}</text>
						</view>
					</view>
				</view>

			</scroll-view>
			<view class="btn btn1" @tap="openVip" v-if="vipIsCheck==true">
				立即支付{{money}}元
			</view>
		</view>

		<pay :money="money" :isShow="isShow" :duration="duration" :newMember_level="newMember_level" :paytype="paytype"></pay>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	import pay from '../../../components/pay.vue'

	export default {
		components: {
			mask,
			pay
		},
		data() {
			return {
				taocanList1: [],
				vipList1: [{
					icon: '/static/wode/quanyi1.png',
					title: '身份标识',
					text: ''
				}, {
					icon: '/static/wode/quanyi2.png',
					title: '财富',
					text: ''
				}, {
					icon: '/static/wode/quanyi3.png',
					title: '客服',
					text: ''
				}, {
					icon: '/static/wode/quanyi4.png',
					title: '每日福利',
					text: ''
				}],
				vipList2: [{
					icon: '/static/wode/quanyi5.png',
					title: '沟通',
					text: ''
				}, {
					icon: '/static/wode/quanyi6.png',
					title: '搜索',
					text: ''
				}, {
					icon: '/static/wode/quanyi7.png',
					title: '匹配',
					text: ''
				}, {
					icon: '/static/wode/quanyi8.png',
					title: '翻译',
					text: ''
				}],
				isShowMask: false,
				isShow: false,
				money: '',
				ischeck: false,
				iszhifu: true,
				isweixin: false,
				mobile: '',
				paydata: {}, //订单信息
				member_level: '',
				vipIsCheck: false, //是否选择套餐
				newMember_level: '', //开通的套餐等级
				vipList: [],
				duration: '', //选择的会员时间
				paytype: 'member'

			}
		},
		onShow() {
			this.getvipList()
			var userInfo = uni.getStorageSync('user_info')
			this.mobile = userInfo.mobile
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			getuserinfo(e) {
				console.log(1)
				console.log(e, '用户信息')
			},
			getUserData() {
				var me = this;
				var data = {
					user_id: uni.getStorageSync('user_id')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						uni.setStorageSync('user_info', res.data.data[0])
					},
				})
			},
			getvipList() {
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userMemberLevel',
					actionName: 'query',
					data: {
						platform: 'android'
					},
					successBack: function(res) {
						console.log(res, '会员列表')
						me.taocanList1 = res.data.data
						for (var i = 0; i < me.taocanList1.length; i++) {
							me.taocanList1[i].discount = (me.taocanList1[i].discount).toFixed(1)
							me.taocanList1[i].member_equity = me.taocanList1[i].member_equity.split(',')
							me.taocanList1[i].introduction = me.taocanList1[i].introduction.split(',')
							for (var z = 0; z < me.taocanList1[i].introduction.length; z++) {
								if (z < 4) {
									me.vipList1[z].text = me.taocanList1[i].introduction[z]
								} else {
									for (var a = 0; a < me.vipList2.length; a++) {
										me.vipList2[a].text = me.taocanList1[i].introduction[z]
									}
								}
							}

							for (var j = 0; j < me.taocanList1[i].cardEntityList.length; j++) {
								me.taocanList1[i].cardEntityList[j].select = false
								me.taocanList1[i].cardEntityList[j].discount = (me.taocanList1[i].cardEntityList[j].discount).toFixed(1)
							}
						}
					}
				})
			},
			selectVip(index, index1) {

				if (this.taocanList1[index].cardEntityList[index1].select == false) {
					for (var i = 0; i < this.taocanList1.length; i++) {
						for (var j = 0; j < this.taocanList1[i].cardEntityList.length; j++) {
							this.taocanList1[i].cardEntityList[j].select = false
						}
					}
					this.taocanList1[index].cardEntityList[index1].select = true
					this.money = this.taocanList1[index].cardEntityList[index1].discount_amout
					this.newMember_level = this.taocanList1[index].member_level
					this.vipIsCheck = true
					this.duration = this.taocanList1[index].cardEntityList[index1].duration
					console.log(this.duration)
				} else {
					this.taocanList1[index].cardEntityList[index1].select = false
					this.vipIsCheck = false
				}
			},
			closeMask() {
				this.isShow = false;
				this.isShowMask = false;
			},
			// #ifdef APP-PLUS
			openVip(index) {
				this.isShow = true;
				this.isShowMask = true;
			},
			// #endif
			//  #ifdef MP-WEIXIN
			openVip() {
				var me = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, '用户信息');
						var rcharge_valid = loginRes.code
						// 获取用户信息

						var data = {
							member_level: me.newMember_level,
							rcharge_type: me.paytype,
							user_id: uni.getStorageSync('user_id'),
							amount: me.money,
							source: 'sr',
							rcharge_account: me.mobile,
							member_duration: me.duration,
							rcharge_valid: rcharge_valid
						}

						me.myAjaxNewPost({ //微信订单数据
							model: 'user',
							controllerName: 'pay',
							actionName: 'wxPay',
							data: data,
							successBack: function(res) {
								console.log(res)
								var paydata = res.data.data
								console.log(paydata, '支付信息')
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: paydata.timeStamp,
									nonceStr: paydata.nonceStr,
									package: paydata.package,
									signType: 'MD5',
									paySign: paydata.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log(paydata.paySign, '支付')
										console.log('fail:' + JSON.stringify(err));
									}
								});
							},
						})
					}
				})
			},
			// #endif
		}
	}
</script>

<style scoped>
	.fixedbox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100%;
	}

	.bg {
		height: 410upx;
		width: 100%;
	}

	.head {
		display: flex;
		position: absolute;
		top: 72upx;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		width: 100%;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.head_left1 {
		display: flex;
		align-items: center;
		font-size: 32upx;
		width: 100upx;
	}

	.head .head_right1 {
		width: 100upx;
	}

	.head_left1 image {
		width: 20upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.card {
		height: 356upx;
		width: 602upx;
		border-radius: 20upx;
		background: #FFFFFF;
		box-shadow: #46CECF 0upx 5upx 29upx 3upx;
		position: absolute;
		left: 74upx;
		top: 155upx;
		color: #999999;
		font-size: 24upx;
		overflow: hidden;
	}

	.card_bg {
		height: 356upx;
		width: 602upx;
		position: absolute;
		left: 0upx;
		top: 0upx;
		
	}

	.card-title {
		color: #46CECF;
		font-size: 30upx;
		text-align: center;
		width: 100%;
		padding-top: 24upx;
		z-index: 10;
		position: relative;
	}

	.cardList {
		display: flex;
		justify-content: space-between;
		padding: 20upx 24upx;
		z-index: 10;

	}

	.cardList image {
		width: 35upx;
		height: 35upx;
		z-index: 10;
	}

	.cardList-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;

	}

	.cardList-item text {
		font-size: 18upx;
		z-index: 10;

	}

	.cardList-item .item-title {
		font-size: 28upx;
		color: #46CECF;
		z-index: 10;
	}

	.vip-item {
		background: #FFFFFF;
		width: 410upx;
		/* height: 550upx; */
		border-radius: 10upx;
		padding: 40upx 24upx;
		margin-right: 20upx;
	}

	.vip-item:nth-child(3) {
		margin-right: 0
	}

	.vip-item-title {
		font-size: 32upx;
		color: #46CECF;
		border-bottom: 1upx solid #E6E6E6;
		padding-bottom: 24upx;
		display: flex;
		align-items: flex-end;
	}

	.vip-item-title2 {
		color: #999999;
		font-size: 18upx;
		padding-left: 12upx;
	}

	.vip-item-title2 text {
		color: #FF0000;
	}

	.priceList {
		display: flex;
		justify-content: space-between;
		padding: 15upx;
		padding-top: 35upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.priceList-left {
		width: 300upx;
		display: flex;
		justify-content: space-between;
	}

	.priceList-left-text1 {
		color: #46CECF;
		font-size: 28upx;
	}

	.priceList-left-text2 {
		color: #999999;
		font-size: 28upx;
	}

	.priceList-left-text3 {
		color: #E6E6E6;
		font-size: 26upx;
		text-decoration: line-through
	}

	.zhekouBox {
		width: 75upx;
		height: 30upx;
		background: #FF2A2A;
		color: #FFFFFF;
		font-size: 20upx;
		border-radius: 10upx;
		text-align: center;
	}

	.selectone {
		width: 30upx;
		height: 30upx;
	}

	.vip-item-bottom {
		display: flex;
		flex-direction: column;
		margin-top: 34upx;
		color: #46CECF;
		font-size: 28upx;
	}

	.vip-item-bottom .bottom-text {
		color: #999999;
		font-size: 18upx;
		margin-top: 10upx;
	}

	.scroll-box {
		margin-top: 130upx;
		/* padding-left: 24upx; */
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.padding-scroll-box {
		display: inline-flex;
		overflow-x: scroll;
		white-space: nowrap;
		/* padding: 0  24upx; */
	}

	.btn1 {
		margin-top: 34upx;
		position: absolute;
		bottom: 60upx;
		left: 24upx;
	}

	/* 支付框 */
	.paybox {
		background: #FFFFFF;
		width: 100%;
		height: 860upx;
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		padding: 0 24upx;
		box-sizing: border-box;
		z-index: 10000;
		position: fixed;
		bottom: -90upx;
	}

	.paybox_title {
		text-align: center;
		font-size: 32upx;
		padding: 24upx 0 26upx 0;
		border-bottom: 1upx solid #E6E6E6;
	}

	.paybox_num {
		font-size: 47upx;
		color: #333333;
		text-align: center;
		padding: 30upx 0;
	}

	.paybox_num text {
		font-size: 88upx;
	}

	.pay_mode {
		font-size: 32upx;
		color: #000000;
	}

	.pay_mode_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.pay_mode_title {
		border-bottom: 1upx solid #E6E6E6;
		width: 100%;
		padding-bottom: 20upx;
	}

	.mode_item_left {
		display: flex;
		align-items: center;
		line-height: 88upx;

	}

	.mode_item_left image {
		width: 58upx;
		height: 58upx;
		margin-right: 20upx;
	}

	.mode_item_right {
		width: 40upx;
		height: 40upx;
	}

	.check {
		padding: 30upx 0;
	}

	.check image {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.check text {
		font-size: 28upx;
		color: #333333;
	}

	.shurepay {
		margin-bottom: 30upx;
	}

	.mask-btn {
		width: 702upx;
		height: 88upx;
		background: rgba(70, 206, 207, .5);
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
		margin: 0 auto;
		font-size: 32upx;
	}
</style>
